<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/inc/taglib.inc" %>
<%@ include file="/WEB-INF/inc/script.inc" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<base href="${base}">
    <title>中金通 | 签到详情</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">

	<!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="css/plugins/dataTables/dataTables.responsive.css" rel="stylesheet">
    <link href="css/plugins/dataTables/dataTables.tableTools.min.css" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <link href="css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="css/plugins/jsTree/style.min.css" rel="stylesheet">
	<script src="http://api.map.baidu.com/api?v=1.5&ak=cK6xnlseKb6piOTpfF59efeG" type="text/javascript"></script>
</head>
<body>
    <div id="wrapper">
    	<!-- 左侧菜单 -->
        <jsp:include page="/WEB-INF/jsp/common/main-menu.jsp"></jsp:include>

        <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
        <!-- 头部工具栏区 -->
        <jsp:include page="/WEB-INF/jsp/common/main-header.jsp"></jsp:include>
        </div>
            <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-lg-10">
                    <h2>员工管理</h2>
                    <ol class="breadcrumb">
                        <li>
                            <a href="common/platform">Home</a>
                        </li>
                        <li>
                            <a href="checkin/list">签到管理</a>
                        </li>
                        <li class="active">
                            <strong>签到详情</strong>
                        </li>
                    </ol>
                </div>
                <div class="col-lg-2">

                </div>
            </div>
		
		<div class="row" style="margin-top:10px;">
			<div class="col-md-12">
				<div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li>
								<a href="checkin/list">
									 签到列表
								</a>
							</li>
							<li class="active">
								<a href="checkin/detail">
									 签到详情
								</a>
							</li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active">
                                <div class="panel-body" style="padding-top:0px;padding-bottom:0px;padding-right:0px;">
            <div class="row">
                <div class="col-md-3">
                <div style="padding:10px; margin-top:4px;">
                <form id="queryForm" method="post">
                <input type="hidden" id="employeeId" name="employeeId" value="${user.employeeId}">
                <div class="row">
                    <div class="form-group fa fa-user fa-lg">
                        ${user.name}
                    </div>
                </div>
                
                <div class="row">
                    <div class="form-group">
                    	<div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        	<input type="text" id="startDate" name="startDate" placeholder="开始日期" value="${currentDate}" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                    	<div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        	<input type="text" id="signDate" name="signDate" placeholder="结束日期" value="${currentDate}" class="form-control">
                        </div>
                    </div>
                </div>
                
                <div class="row">
                	<div class="form-group">
                        <button class="btn btn-primary" id="queryBtn" type="button">查 询</button>
                        <button class="btn btn-white" type="reset">重 置</button>
                    </div>
                </div>
				</form>
				</div>
                <div class="table-responsive m-t">
                    <table class="table invoice-table table-hover">
                         <tbody id="updateBody">
                         </tbody>
                        </table>
                </div>
                </div>
				<div class="col-md-9" id="map" style="width:70%;height:70%;float:right"></div>
            </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
			</div>
		</div>
		<script id="updateTemplate" type="text/x-jquery-tmpl">
						{{each(i,checkin) list}}
						<tr id="{{= checkin.px}},{{= checkin.py}}" style="cursor:pointer;">
                            <td><div><strong>{{= checkin.location}}</strong></div>
                                <small>{{= checkin.signTime}}</small></td>
                            <td><i class="fa fa-angle-right"></i></td>
                        </tr>
						{{/each}}
		</script>

        </div>
        </div>

    <!-- Mainly scripts -->
    <script src="js/jquery-2.1.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/plugins/jeditable/jquery.jeditable.js"></script>
	<script src="js/jquery.serialize-object.min.js" type="text/javascript"></script>
    <!-- Custom and plugin javascript -->
    <script src="js/inspinia.js"></script>
    <script src="js/plugins/pace/pace.min.js"></script>
	<script src="js/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>
	<script src="js/jquery.tmpl.min.js" type="text/javascript"></script>

    <!-- Data Tables -->
    <script src="js/plugins/dataTables/jquery.dataTables.min.js"></script>
    <script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <script src="js/plugins/dataTables/dataTables.responsive.js"></script>
    <script src="js/plugins/dataTables/dataTables.tableTools.min.js"></script>
    <!-- Data picker -->
    <script src="js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <!-- 业务 -->
    <script src="js/plugins/jsTree/jstree.min.js"></script>
    <script src="js/checkin/checkin-detail.js?v=${jsVersion}"></script>
    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function() {
        	CheckinDetail.init();
        	$('#startDate').datepicker({
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true
            });
        	
        	$('#signDate').datepicker({
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true
            });
        	$('#startDate').datepicker()
            .on('changeDate', function(ev){
             	var date = $('#startDate').val();
             	var date2 = $('#signDate').val();
             	var startDate = Date.parse(date);
             	var endDate = Date.parse(date2);
             	var today = new Date();
             	var todayTime = today.getTime();
                	if(startDate >= todayTime){
                		bootbox.alert("查询开始时间不能大于当前时间");
                		$('#startDate').val("");
                	}else if(startDate > endDate){
                		bootbox.alert("查询开始时间不能大于截止时间.");
                		$('#startDate').val("");
                	}
                	$('#startDate').datepicker('hide');
            }); 
			$('#signDate').datepicker()
            .on('changeDate', function(ev){
             	var date = $('#startDate').val();
             	var date2 = $('#signDate').val();
             	var startDate = Date.parse(date);
             	var endDate = Date.parse(date2);
             	var today = new Date();
             	var todayTime = today.getTime();
                	if(endDate >= todayTime){
                		bootbox.alert("查询结束时间不能大于当前时间");
                		$('#signDate').val("");
                	}else if(startDate > endDate){
                		bootbox.alert("查询截止时间不能小于开始时间.");
                		$('#signDate').val("");
                	}
                	$('#signDate').datepicker('hide');
            }); 
        });
    </script>

</body>
</html>